<template>
	<view>
		<view class="title">
			合同纠纷的案例展示
		</view>
		<view class="sort-box" v-for="item in 12" :key="item" @tap="jumpCaseDetail">
			<text>广东盈盛执业有限公司，广东景峰机电有限公司合同纠纷</text>
			<image src="../../static/image/xiangxia.png" mode=""></image>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="page-bottom">
			<button size="default" open-type="contact">
				<image src="../../static/image/home.png" class="kefu" mode=""></image>
				<text>联系客服</text>
			</button>
			<view class="bottom-line">
				
			</view>
			<view class="bottom-middle" @tap="$refs.popup.open()">
				<image src="../../static/image/banner2.png" class="phone" mode=""></image>
				<image src="../../static/choose-Cade/choose-Cades.png" class="xiangshang" mode=""></image>
			</view>
			<view class="price" @tap="pay">
				38元咨询律师
			</view>
		</view>
		<!-- 点击底部弹窗 -->
		<uni-popup ref="popup">
			<view class="pop-c">
				<view class="pop-title">
					服务内容
				</view>
				<view class="pop-line">
					<image src="../../static/image/consult/loaing.png" mode=""></image>
					<view class="">
						享1小时，一对一电话咨询+图文语音
					</view>
				</view>
				<view class="pop-line">
					<image src="../../static/image/consult/pay.png" mode=""></image>
					<view class="">
						律师未响应，服务差，可立即投诉退款
					</view>
				</view>
				<view class="pop-line">
					<image src="../../static/image/consult/write.png" mode=""></image>
					<view class="">
						在线客服，实时跟踪反馈
					</view>
				</view>
				<image src="../../static/image/banner.png" class="pop-middle" mode=""></image>
				<view class="pop-btn" @tap="pay">
					38元咨询律师
				</view>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from "@/components/uni-popup/uni-popup.vue"
	export default {
		data() {
			return {
				
			};
		},
		methods:{
			pay(){
				this.$refs.popup.close()
			},
			jumpCaseDetail(){
				uni.navigateTo({
					url:"/pages/caseDetail/caseDetail"
				})
			}
		},
		created() {
			uni.setNavigationBarTitle({
				title:"合同纠纷"
			})
		},
		components:{
			uniPopup
		}
	}
</script>

<style lang="scss">
.title{
	text-align: center;
	color: #ccc;
	font-size: 27rpx;
	padding: 20rpx;
}
.sort-box{
	width: 95%;
	margin-left: auto;
	font-size: 27rpx;
	color: #000;
	border-top: 1rpx solid #EEEEEE;
	display: flex;
	align-items: center;
	padding: 20rpx 20rpx 20rpx 0;
	text{
		letter-spacing: 1rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		width: 92%;
	}
	image{
		width: 28rpx;
		height: 33rpx;
		transform: rotate(90deg);
		margin-left: auto;
	}
}
</style>
